<template>
  <div class="banlaceRecord">
    <div class="banlaceRecordMain">
      <div class="detail_DataBg">
        <div v-show="gold_coinArr.length!==0" class="detailTable">

          <div class="gold_coin">
            <table cellpadding="0" cellspacing="0" border="1">
              <tr>
                <th>
                  ID
                </th>
                <th>
                  订单号
                </th>
                <th>
                  充值金额
                </th>
                <th>
                  支付方式
                </th>
                <th>
                  状态
                </th>
                <th>
                  时间
                </th>
              </tr>
              <tr v-for="(gold_coinIt,gold_coinIdx) in gold_coinArr" :key="'gold_coinIt_0'+gold_coinIdx">
                <td>{{gold_coinIt.id}}</td>
                <td>{{gold_coinIt.order_sn}}</td>
                <td>{{gold_coinIt.money}}</td>
                <td>{{gold_coinIt.pay_type_text}}</td>
                <td>{{gold_coinIt.status_text}}</td>
                <td>{{tg_Time(gold_coinIt.create_time)}}</td>
              </tr>
            </table>
            <FenYe ref="myFenye" :last_page="last_page"></FenYe>
          </div>
        </div>

        <div v-show="gold_coinArr.length==0" class="NoData">

          <div class="noData">
            <img src="@/assets/img/coinCharge/empty_o.png" >
          </div>



        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import FenYe from "@/components/vuePagination.vue";

  export default{
    data(){
      return{
        gold_coinArr:[],

        //分页总页数
        last_page:null
      }
    },
    components:{
      FenYe
    },

    mounted() {
      let that=this;
      that.getChargeReardFn(1);
      console.log("==============余额充值请求==============");

    },
    methods:{
      getChargeReardFn(val){
        let that=this;

          this.$request.get(
            "/log/recharge",
            {
              page:val
            },
            {
              'Content-Type': 'multipart/form-data'
            }
          ).then((res)=>{
           	console.log("余额充值请求成功：",res);

            that.gold_coinArr=res.data.data.data;
            console.log("this.$refs.myFenye:",this.$refs.myFenye);
            that.last_page=res.data.data.last_page;
            this.$refs.myFenye.fetchData();
           })
           .catch((err)=>{
           	console.log("余额充值请求失败：",err);
           });

      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  .banlaceRecord{
    .banlaceRecordMain{
      padding: 50px;
      .detail_DataBg{
        margin-top: 45px;
        .gold_coin{
          table{
            border-collapse: collapse;
            width: 100%;
            border-color: #2c8eff;//#2c8eff;

            tr{
              th{
                text-align: center;
                padding: 10px;
                color: #2c8eff;
                font-size: 16px;
                font-weight: bolder;
                line-height: 24px;
                word-break: break-all;
              }
              td{
                text-align: center;
                word-break: break-all;
                padding: 10px;
                color: #666;
                font-size: 14px;
                line-height: 20px;
              }
            }
          }
        }
      	.noData{
      		display: flex;
      		flex-direction: row;
      		justify-content: center;
      		align-items: center;
      		min-height: 600px;
      		img{
      			display: block;
      			max-width: 100%;
      			max-height: 100%;
      		}
      	}
      	.beizhu{
      		display: flex;
      		flex-direction: row;
      		align-items: center;
      		img{
      			display: block;
      			height: 14px;
      			margin-right: 3px;
      		}
      		span{
      			display: block;
      			font-size: 12px;
      			line-height: 14px;
      			color: #969696;
      		}
      	}
      }
    }
  }

  @media screen and (max-width:767px){
    .banlaceRecord{
      .banlaceRecordMain{
        padding: 15px;
        .detail_DataBg{
          .gold_coin{
            table{
              tr{
                th{
                  word-break: break-all;
                }
                td{
                  word-break: break-all;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
